<template>
	<view style="background-color: #ffffff;padding-bottom: 100rpx;">
		<view class="showdate">
			<view style="width: 70%;margin: auto">
				<image class="dateimg" mode="" src="../../static/img/lefticon.png" style="height: 15.1709px;"
					role="img"></image>
				<view class="datetext" style="width: 100px;">
					<view style="width:100%; margin:auto;color:#b90000;margin-bottom: 10px;">热门推荐
					</view>
				</view>
				<image class="dateimg" mode="" src="../../static/img/righticon.png" role="img"
					style="height: 14.6999px;"></image>
			</view>
		</view>
		<!-- <ad unit-id="adunit-8a166daae15abc5e" ad-type="video" ad-theme="white"></ad> -->
		<mescroll-body ref="mescrollRef" @up="upCallback" :down="downOption" :up="upOption" :top="0" bottom="100">
			
			<card v-for="(Item, index) in hotlist" :key="index" :newstitle="Item.title" :newsthumb="Item.thumb"
				:newscode="Item.code" @toNewsDetail="clickToDetail(Item.ano)">
			</card>
		</mescroll-body>
	</view>
</template>

<script>
	// 在页面中定义插屏广告
	let interstitialAd = null
	import card from '@/components/card/card.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			card
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {},
				hotlist: []
			};
		},
		onLoad(options) {
			// 在页面onLoad回调事件中创建插屏广告实例
			if (wx.createInterstitialAd) {
				interstitialAd = wx.createInterstitialAd({
					adUnitId: 'adunit-9cb695dc8f8b004e'
				})
			}
		},
		onShow() {
			if (interstitialAd) {
				interstitialAd.show().catch((err) => {
					console.error(err)
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.hotlist[0].title,
				path: '/pages/hot/index',
				imageUrl: this.hotlist[0].sharethumb,
			}
		},

		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},

			upCallback(page) {

				this.pagenow = page.num;
				let length = this.hotlist.length;
				let endid = 0;
				if (length > 0) {
					endid = this.hotlist[length - 1].click;
				}

				if (page.num > 5) {
					this.mescroll.endUpScroll(1)
					return false;
				}
				// let endid = this.newsList[length-1].id;
				let data = {
					'page': page.num,
					'pageize': page.size,
					'endid': endid
				};
				var that = this;
				this.$apis.getHotList(data).then(res => {
					this.mescroll.endSuccess(res.hotlist.length);
					//追加新数据
					this.hotlist = this.hotlist.concat(res.hotlist);

					//this.count = res.count;
				}).catch(() => {
					this.mescroll.endErr();
				});

			},
			/**
			 * 文章点击
			 */
			clickToDetail: function(index, type) {
				console.log('index', index);
				uni.navigateTo({
					url: '/pages/news/index?ano=' + index
				})
			},
		}
	}
</script>
<style>
	.dateimg {
		margin: 0 auto;
		width: 150rpx;
		margin-bottom: 20rpx;
		float: left;
	}

	.datetext {
		width: 180rpx;
		margin-bottom: 30rpx;
		float: left;
		text-align: center;
		color: rgb(185, 0, 0);
		font-weight: 900;
	}

	.showdate {
		height: 40rpx;
		text-align: center;
		overflow: hidden;
		margin-top: 40px;
		margin-bottom: 60px;
	}
</style>